<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>

<body class="dpflex">
   
    <main>
            <header>
                <div class="swiper">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="./img/course-img03.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/course-img04.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="./img/index-card-data.png" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                    
                    <!-- 如果需要导航按钮 -->
                    <!-- <div class="swiper-button-prev"></div> -->
                    <!-- <div class="swiper-button-next"></div> -->
                    
                    <!-- 如果需要滚动条 -->
                    <!-- <div class="swiper-scrollbar"></div> -->
                </div>
            </header>
        <div class="main_box dpflex">
            <div class="ranking_box">
                <div>
                    <img src="../src/img/index-card-rank.png" alt="" class="rank_img">
                </div>
                <div class="rank_tit">今日排名</div>
                <div class="rank_num">9</div>

            </div>
            <div class="clock_box">
                <div>
                    <img src="./img/index-card-sum.png" alt="" class="clock_img">
                </div>
                <div class="clock_tit">累计打卡<span>23</span> 天</div>
                <div class="clock_btn">今日打卡</div>
            </div>
            <div class="sport_data">
                <div>
                    <img src="./img/index-card-data.png" alt="" class="sport_img">
                </div>
                <div class="sport_tit">运动数据</div>
            </div>
            <div class="badge">
                <div>
                    <img src="./img/index-card-badge.png" alt="" class="badge_img">
                </div>
                <div class="badge_tit">累计运动徽章</div>
                <div class="badge_num">9</div>
                <div class="mei">枚</div>
            </div>
            <div class="curriculum">
                <div>
                    <img src="./img/course-img04.jpg" alt="" class="curriculum_img">
                </div>
                <div class="curriculum_tit">课程介绍</div>
            </div>
            <div class="outdoors">
                <div>
                    <img src="./img/course-img02.png" alt="" class="outdoors_img">
                </div>
                <div class="curriculum_tit">户外跑步</div>
            </div>
        </div>
    </main>
    <!-- <footer class="dpflex">
       <a href="./index.html" >
        <div class="index color">
            <i class="iconfont icon-shouye"></i>
            <div class="tit_index">首页</div>
        </div>
       </a>
       <a href="./sport.html">
        <div class="sport">
            <i class="iconfont icon-yundong"></i>
            <div class="tit_sport">运动</div>
        </div>
       </a>
       <a href="./mine.html">
        <div class="min">
            <i class="iconfont icon-wode"></i>
            <div class="tit">我的</div>
        </div>
       </a>
    </footer> -->
</body>

</html>